<!--
 * @Author: wangbei wangbei@zhongguancun.com.cn
 * @Date: 2025-04-09 13:50:57
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-05-16 17:03:28
 * @FilePath: \ykpt\src\views\components\map\scopeMap.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-modal style="position: relative;" title="允许范围" :visible="visible" @ok="handleOk" @cancel="handleCancel"
    width="1000px" :footer="null">
    <div id="scopeMap"></div>
    <!-- 图例 -->
    <div class="legend">
      <a-checkbox-group :options="BoundaryList" v-model="checkedList" @change="initBoundary">
        <!-- <span slot="label" slot-scope="{ value }" :style="{color:item.color}">{{ label }}</span> -->
      </a-checkbox-group>
    </div>
  </a-modal>
</template>

<script>
import { gws84 } from './js/BD09-WGS84.js'
export default {
  data() {
    return {
      visible: false,
      map: null,
      BoundaryList: [],
      checkedList: [],
    }
  },
  components: {},
  created() { },
  mounted() { },
  methods: {
    showModal(data = []) {
      this.visible = true
      this.checkedList = []
      data.forEach(item => {
        // item.label = item.dzwlName
        item.value = item.id
        this.checkedList.push(item.id)
        let text =''
        if(item.timeRules&&item.timeRules.length){
          item.timeRules.forEach((item,index)=>{
           text = `${text}${index==0?'':'，'}${item.startTime}~${item.endTime}`
          })
        }
        item.label=`${item.dzwlName}${text?`(${text})` : ''}`
        // 生成随机颜色
        item.color = this.getRandomRgbaColor()
      })
      this.BoundaryList = data
      console.log(this.BoundaryList, 'this.BoundaryList')
      this.$nextTick(() => {
        setTimeout(() => {
          this.initMap()
        }, 500)
      })
    },
    initMap() {
      this.map = new BMapGL.Map('scopeMap')
      const point = new BMapGL.Point(116.403, 39.914)
      this.map.centerAndZoom(point, 14)
      this.map.enableScrollWheelZoom(true)
      //   this.map.setTilt(65)
      // 开始加载数据
      this.initBoundary()
    },
    handleOk() {
      console.log('成功')
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    initBoundary() {
      // 清除
      this.map.clearOverlays()
      // 绘制多边形
      const data = this.BoundaryList.filter(item => this.checkedList.includes(item.id) && item.posArray)
      let pointsList = []
      data.forEach(item => {
        const path = JSON.parse(item.posArray)
        const points = this.drawPolygon(path, item.color)
        pointsList = [...pointsList, ...points]
        // 绘制圆形
        // if (item.dzwiType == 0) {
        //   this.drawCircle(path, item.radius, item.color)
        // } else {
        //   // 绘制多边形
        //   this.drawPolygon(path, item.color)
        // }
      })
      this.map.setViewport(pointsList)

    },
    drawPolygon(path, color) {
      path = path.map(item => {
        return new BMapGL.Point(...item)
      })
      const polygon = new BMapGL.Polygon(path, {
        strokeColor: '#FF0000',
        strokeWeight: 2,
        fillColor: color
      });
      this.map.addOverlay(polygon);
      return path
    },
    getRandomRgbaColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      const a = Math.random().toFixed(2);
      return `rgba(${r}, ${g}, ${b}, ${a})`;

    },
    drawCircle(point, radius, color) {
      const center = new BMapGL.Point(...point);
      this.circle = new BMapGL.Circle(center, radius, {
        strokeColor: '#FF0000',
        strokeWeight: 2,
        fillColor: color
      });
      this.map.addOverlay(this.circle);

    }
  },
}
</script>

<style scoped lang="less">
#scopeMap {
  width: 100%;
  height: 500px;
}
</style>
<style lang="less">
// 隐藏版权信息
.BMap_cpyCtrl {
  display: none;
}

// 隐藏版权图标
.anchorBL img {
  display: none;
}

.legend {
  width: 200px;
  position: absolute;
  z-index: 12;
  left: 30px;
  bottom: 180px;
  background: #fff;
  padding: 20px;
}
</style>
